<template>
	<u-popup :show="value" mode="bottom" :z-index="uZIndex" :closeOnClickOverlay="maskCloseAble" @close="close">
		<u-tabs v-if="value" :list="genTabsList" :current="tabsIndex" @change="tabsChange" ref="tabs"
			lineColor="#DE2E2E"></u-tabs>
		<view class="area-box">
			<view class="u-flex" :class="{ 'change':isChange }">
				<view class="area-item">
					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
						<scroll-view :scroll-y="true" style="height: 100%">
							<!-- <u-cell-group>
								<u-cell v-for="(item, index) in provinces" :title="item.name" :arrow="false"
									:key="index" @click="provinceChange(item.code)">
									<u-icon v-show="province == item.code" slot="right-icon" color="#DE2E2E"
										size="20" name="checkmark"></u-icon>
								</u-cell>
							</u-cell-group> -->
							<view class="item" v-for="(item, index) in provinces" :key="index" @click="provinceChange(item.code)">
								<text :class="{'active': province == item.code}">{{ item.name }}</text>
								<view class="icon"><u-icon v-if="province == item.code" color="#DE2E2E"
									size="20" name="checkmark"></u-icon></view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="area-item">
					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
						<scroll-view :scroll-y="true" style="height: 100%">
							<!-- <u-cell-group v-if="isChooseP">
								<u-cell v-for="(item,index) in citys" :title="item.name" :arrow="false" :key="index"
									@click="cityChange(item.code)">
									<u-icon v-show="city == item.code" slot="right-icon" size="20"
										color="#DE2E2E" name="checkmark"></u-icon>
								</u-cell>
							</u-cell-group> -->
							<view class="item" v-if="isChooseP" v-for="(item, index) in citys" :key="index" @click="cityChange(item.code)">
								<text :class="{'active': isChooseP && city == item.code}">{{ item.name }}</text>
								<view class="icon"><u-icon v-if="isChooseP && city == item.code" color="#DE2E2E"
									size="20" name="checkmark"></u-icon></view>
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="area-item">
					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
						<scroll-view :scroll-y="true" style="height: 100%">
							<!-- <u-cell-group v-if="isChooseC">
								<u-cell v-for="(item,index) in areas" :title="item.name" :arrow="false" :key="index"
									@click="areaChange(item.code)">
									<u-icon v-show="area == item.code" slot="right-icon" size="20"
										color="#DE2E2E" name="checkmark"></u-icon>
								</u-cell>
							</u-cell-group> -->
							<view class="item" v-if="isChooseC" v-for="(item, index) in areas" :key="index" @click="areaChange(item.code)">
								<text :class="{'active': isChooseC && area == item.code}">{{ item.name }}</text>
								<view class="icon"><u-icon v-if="isChooseC && area == item.code" color="#DE2E2E"
									size="20" name="checkmark"></u-icon></view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		getRegion
	} from '@/config/api'
	/**
	 * city-select 省市区级联选择器
	 * @property {String Number} z-index 弹出时的z-index值（默认1075）
	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
	 * @property {String} default-region 默认选中的地区，中文形式
	 * @property {String} default-code 默认选中的地区，编号形式
	 */
	export default {
		name: 'u-city-select',
		props: {
			// 通过双向绑定控制组件的弹出与收起
			value: {
				type: Boolean,
				default: false
			},
			// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
			defaultRegion: {
				type: Array,
				default () {
					return [];
				}
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				cityValue: "",
				isChooseP: false, //是否已经选择了省
				province: 0, //省级下标
				provinces: [],
				isChooseC: false, //是否已经选择了市
				city: 0, //市级下标
				citys: [],
				isChooseA: false, //是否已经选择了区
				area: 0, //区级下标
				areas: [],
				tabsIndex: 0,
			}
		},
		watch: {
			defaultRegion(newValue, oldValue) {
				if (newValue.length === 3) {
					this.init1(newValue);
				}
			}
		},
		created() {
			this.init();
		},
		computed: {
			isChange() {
				return this.tabsIndex > 1;
			},
			genTabsList() {
				let tabsList = [{
					name: "请选择"
				}];
				if (this.isChooseP) {
					tabsList[0]['name'] = this.provinces.find((p) => p.code == this.province).name;
					tabsList[1] = {
						name: "请选择"
					};
				}
				if (this.isChooseC) {
					tabsList[1]['name'] = this.citys.find((p) => p.code == this.city).name;
					tabsList[2] = {
						name: "请选择"
					};
				}
				if (this.isChooseA) {
					tabsList[2]['name'] = this.areas.find((p) => p.code == this.area).name;
				}
				return tabsList;
			},
			uZIndex() {
				// 如果用户有传递z-index值，优先使用
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
		methods: {
			getRegionData(code, callback) {
				let httpData = {
					custom: {
						load: false
					},
					params: {}
				}
				let columns = this.columns;
				if (code) {
					httpData.params.code = code;
				}
				getRegion(httpData).then((res) => {
					callback && callback(res);
				});
			},
			init() {
				this.getRegionData("00", (res) => {
					this.provinces = res;
				});
			},
			init1(defaultRegion) {
				this.setProvince(defaultRegion[0]);
				this.getRegionData(defaultRegion[0], (res) => {
					this.citys = res;
					this.setCity(defaultRegion[1]);
					this.getRegionData(defaultRegion[1], (res) => {
						this.areas = res;
						this.setArea(defaultRegion[2]);
					});
				});
			},
			setProvince(code) {
				this.isChooseP = true;
				this.province = code;
			},
			setCity(code) {
				this.isChooseC = true;
				this.city = code;
			},
			setArea(code) {
				this.tabsIndex = 2;
				this.isChooseA = true;
				this.area = code;
			},
			close() {
				this.$emit('input', false);
			},
			tabsChange(e) {
				this.tabsIndex = e.index;
			},
			provinceChange(code) {
				uni.showLoading({
					title: "数据加载中..."
				});
				this.getRegionData(code, (res) => {
					this.isChooseP = true;
					this.isChooseC = false;
					this.isChooseA = false;
					this.province = code;
					this.citys = res;
					this.tabsIndex = 1;
					uni.hideLoading();
				});
			},
			cityChange(code) {
				uni.showLoading({
					title: "数据加载中..."
				});
				this.getRegionData(code, (res) => {
					this.isChooseC = true;
					this.isChooseA = false;
					this.city = code;
					this.areas = res;
					this.tabsIndex = 2;
					uni.hideLoading();
				});
			},
			areaChange(code) {
				this.isChooseA = true;
				this.area = code;
				let result = {};
				result.province = this.provinces.find((p) => p.code == this.province);
				result.city = this.citys.find((p) => p.code == this.city);
				result.area = this.areas.find((p) => p.code == this.area);
				this.$emit('city-change', result);
				this.close();
			}
		}

	}
</script>
<style lang="scss">
	.area-box {
		width: 100%;
		overflow: hidden;
		height: 800rpx;

		>view {
			width: 150%;
			transition: transform 0.3s ease-in-out 0s;
			transform: translateX(0);

			&.change {
				transform: translateX(-33.3333333%);
			}
		}

		.area-item {
			width: 33.3333333%;
			height: 800rpx;
			
			.item{
				padding: 20rpx;
				font-size: 28rpx;
				position: relative;
				border-bottom: 1rpx solid $uni-border-color;
				.active{
					color: $u-error;
				}
				.icon{
					position: absolute;
					right: 30rpx;
					top: 20rpx;
				}
			}
		}
	}
</style>
